<template>
	<view>
		<u-card :show-head="false" padding="30" margin="20rpx" :foot-border-top="false">
			<view class="card-body" slot="body">
				<u-form :model="form" ref="uForm" label-width="180">
					<view class="title">
						异常汇报
					</view>
					<u-form-item label="异常类型:" :border-bottom="false" prop="exceptionTypeName">
						<u-input v-model="form.exceptionTypeName" @click="openPicker('exceptionTypeName')"
							placeholder="请选择异常类型" border type="select" />
					</u-form-item>
					<u-form-item label="异常原因:" :border-bottom="false" prop="exceptionTypeDescName">
						<u-input v-model="form.exceptionTypeDescName" @click="openPicker('exceptionTypeDescName')"
							placeholder="请选择异常原因" border type="select" />
					</u-form-item>
					<u-form-item label="异常备注:" :border-bottom="false">
						<u-input v-model="form.remark" border />
					</u-form-item>
					<u-form-item label="异常图片:" :border-bottom="false" prop="exceptionPic">
					</u-form-item>
					<u-upload ref="uUPload" :before-upload="beforeUpload" :http-request="httpRequest"
						@on-uploaded="onUploaded" @on-success="onSuccess" @on-progress="onProgress"
						@on-remove="onRemove"></u-upload>
				</u-form>
			</view>
			<view class="u-footer" slot="foot">
				<view></view>
				<u-button type="primary" size="medium" @click="submit">提交</u-button>
			</view>
		</u-card>
		<u-toast ref="uToast" />
		<u-picker mode="selector" v-model="show" :default-selector="defaultSelector" :title="pickerTitle"
			:range="selectorObj" :range-key="rangeKey" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					exceptionType: "", //异常类型id
					exceptionTypeName: "", //异常类型名称
					exceptionTypeDesc: "", //异常原因id
					exceptionTypeDescName: "", //异常原因名称
					remark: "", //异常备注
					exceptionPic: "", //异常图片
					parentId: "", //需求单/运输单id
					orderType: "", //父单据类型
					orderStatus: "",
				},
				fileList: [], //图片列表
				rules: {
					exceptionTypeName: [{
						required: true,
						message: '请选择异常类型',
						trigger: 'blur,change'
					}],
					exceptionTypeDescName: [{
						required: true,
						message: '请选择异常原因',
						trigger: 'blur,change'
					}],
					exceptionPic: [{
						required: true,
						message: '请上传异常图片',
						trigger: 'blur,change'
					}],
				},
				exceptionTypeList: [], //异常类型列表
				exceptionTypeDescList: [], //异常原因列表
				selectorObj: [], //当前打开的选择列表
				show: false, //选择显示
				rangeKey: 'name', //选择列表展示的字段
				pickerType: '', //选择列表选择返回判断是表单哪个字段
				pickerTitle: '异常类型',
			}
		},
		onLoad(option) {
			this.form = {
				exceptionType: "", //异常类型id
				exceptionTypeName: "", //异常类型名称
				exceptionTypeDesc: "", //异常原因id
				exceptionTypeDescName: "", //异常原因名称
				remark: "", //异常备注
				exceptionPic: "", //异常图片
				parentId: "", //需求单/运输单id
				orderType: "", //父单据类型
				orderStatus: "",
			}
			this.fileList = []
			this.$u.api.carrier.getExceptionType().then(data => {
				if (data.code === 200 && data.success) {
					this.exceptionTypeList = data.data.records
				}
			}).catch(() => {})
			if (option) {
				this.form.parentId = option.id
				this.form.orderType = option.orderType
				this.form.orderStatus = option.orderStatus
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			//选择器默认选择
			defaultSelector() {
				try {
					let num = this.selectorObj.findIndex(item => item[this.rangeKey] === this.form[this.pickerType])
					return [num < 0 ? 0 : num]
				} catch (e) {
					return [0]
				}
			}
		},
		methods: {
			async beforeUpload(index, list) {
				// 返回一个promise
				return true
				// console.log(list);
				this.$u.api.common.uploadFile({
					file: list[0].url
				}).then(res => {
					// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
					// resolve();
					// console.log(res);
				}).catch(err => {
					// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
				})
			},
			httpRequest(data) {
				// const {file, name, success, progress, error} = data 里面的所有属性和方法
				// console.log('自定义上传方法：httpRequest', data);
				this.$u.api.common.uploadFile(data.file.url, {
					getTask: (task, config) => {
						task.onProgressUpdate(res => {
							data.progress(res)
						})
					}
				}).then(res => {
					data.success(res);
				}).catch(err => {
					data.error(err);
				})
			},
			onUploaded(lists, name) {
				// console.log('onUploaded', lists, name);
			},
			onSuccess(data, index, lists, name) {
				// console.log('onSuccess', data, index, lists, name);
				if (data.code === 200 && data.success) {
					this.fileList.push(data.data.link)
				}
				this.form.exceptionPic = this.fileList.join(';')
			},
			onProgress(res, index, lists, name) {
				// console.log('onProgress', res, index, lists, name);
			},
			onRemove(index, lists, name) {
				// console.log('onRemove', index, lists, name);
				this.fileList.splice(index, 1)
				this.form.exceptionPic = this.fileList.join(';')
			},
			//打开选择列表
			openPicker(type) {
				this.pickerType = type
				switch (type) {
					case 'exceptionTypeName':
						this.selectorObj = this.exceptionTypeList
						this.rangeKey = 'name'
						this.pickerTitle = '异常类型'
						break;
					case 'exceptionTypeDescName':
						this.selectorObj = this.exceptionTypeDescList
						this.rangeKey = 'reasonDesc'
						this.pickerTitle = '异常原因'
						break;
				}
				this.show = true
			},
			//选择返回
			pickerConfirm(val) {
				this.form[this.pickerType] = this.selectorObj[val[0]][this.rangeKey]
				switch (this.pickerType) {
					case 'exceptionTypeName':
						this.form.exceptionType = this.selectorObj[val[0]].id
						this.exceptionTypeDescList = this.selectorObj[val[0]].exceptionReasonVO
						this.form.exceptionTypeDesc = ""
						this.form.exceptionTypeDescName = ""
						break;
					case 'exceptionTypeDescName':
						this.form.exceptionTypeDesc = this.selectorObj[val[0]].id
						break;
				}
			},
			//提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading()
						let updateData = {
							...this.form,
							exceptionPic: this.fileList.join(';')
						};
						delete updateData.exceptionTypeName;
						delete updateData.exceptionTypeDescName;
						this.$u.api.carrier.exceptionReport({
							...updateData
						}).then(data => {
							uni.hideLoading()
							if (data.code === 200 && data.success) {
								this.$refs.uToast.show({
									title: data.msg,
									type: 'success',
									duration: 1000
								})
								setTimeout(() => {
									this.back()
								}, 1000)
							}
						}).catch(() => {
							uni.hideLoading()
						})
					}
				});
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.card-body {
		.u-form-item {
			padding: 20rpx !important;
		}

		.materials-title {
			color: #333333;
			font-size: 38rpx;
			line-height: 1.5;
			font-weight: 500;
			padding: 20rpx 0;
			width: 610rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #f2f3f6;
		}

		.title {
			color: #333333;
			font-size: 38rpx;
			font-weight: 500;
			padding: 30rpx 20rpx;
			width: 100%;
			border-bottom: 2rpx solid #f2f3f6;
		}
	}

	.u-footer {
		display: flex;
		justify-content: space-between;
	}
</style>
